<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--第03课 18:16-->
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            //全局组件
            Vue.component('Vbtn',{
                template:'' +
                    '<button>按钮</button>'
            })

            var Vheader = {
                data(){
                  return{

                  }
                },
                template: '<div>我是头部组件 </div>',
                methods:{

                }
            }

            var Vaside = {
                template: '<div>我是侧边栏</div>'
            }

            var Vcontent = {
                template:
                    '<div>我是内容组件' +
                    '<Vbtn/>' +
                    '<Vbtn/>' +
                    '<Vbtn/>' +
                    '</div>'
            }

            var App = {
                template: '' +
                    '<div> ' +
                      '<Vheader/>' +
                      '<div>' +
                        '<Vaside/>' +
                        '<Vcontent/>' +
                      '</div>' +
                    '</div>',
                components: {
                    Vheader,
                    Vaside,
                    Vcontent
                }

            };

            new Vue({
                el: '#app',
                data() {
                    return {}
                },
                components: {
                    App
                },
                template: '<App/>'

            });
        </script>
    </body>
</html>
